<template>
  <view>
    <wd-popup
      custom-class="htm-popup"
      v-model="popupState.show"
      lock-scroll
      :safe-area-inset-bottom="safe"
      position="bottom"
      :custom-style="customStyle"
      :z-index="15"
      closable
    >
      <view>
        <view class="product-card">
          <wd-img
            width="200rpx"
            height="200rpx"
            round
            radius="10"
            :src="popupState.data?.mainPic"
          />
          <view class="product-desc">
            <view class="product-text">
              <text>{{ popupState.data.productName }}</text>
              <text>{{ popupState.data.productSpec }}</text>
              <text>￥{{ popupState.data.supplyPrice }}元</text>
            </view>
            <view class="product-number">
              <wd-input-number v-model="popupState.data.quantity" />
            </view>
          </view>
        </view>
        <view class="add-cart flex justify-between items-center">
          <view>
            <text class="block text-sm">合计：</text>
            <text class="block text-red-600 text-xs">
              ￥{{ popupState.data.supplyPrice * popupState.data.quantity }}元
            </text>
          </view>
          <htm-button custom-class="!bg-red-600" class="flex" @click="handleAdd(popupState.data)">
            加入购物车
          </htm-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import { useShopcartStore } from '@/store/shopcart'
import { usePopup } from './index'
import { ICartResult } from '@/service/shopcart/shopcart'
import { IProductResult } from '@/service/index'
import { useProfileStore } from '@/store'
import { throttle } from '@/utils/throttle'

const { popupState } = usePopup()
const shopcartStore = useShopcartStore()
const profileStore = useProfileStore()
const safe = ref<boolean>(false)
const customStyle = ref<string>('')

const handleAdd = throttle(async (product: IProductResult) => {
  const cart: ICartResult = {
    cartonSpec: product.cartonSpec,
    mainPic: product.mainPic,
    price: product.supplyPrice,
    productName: product.productName,
    productSpec: product.productSpec,
    quantity: product.quantity,
    storeCode: profileStore.chargeStore.storeCode,
    upcCode: product.upcCode,
  }
  const success = await shopcartStore.addToShopcart(cart)
  if (success) {
    popupState.value.show = false
  }
}, 500)

const pages = getCurrentPages()
const page = pages[pages.length - 1]
safe.value = !(
  page.route.includes('/index/index') ||
  page.route.includes('/shopcart/shopcart') ||
  page.route.includes('/category/category') ||
  page.route.includes('/profile/profile')
)
if (safe.value) {
  customStyle.value = ''
} else {
  customStyle.value = 'padding-bottom:168rpx'
}
</script>

<style lang="scss" scoped>
@import '/src/style/index';
.product-card {
  display: flex;
  height: 248rpx;
  padding: 25rpx;
  background: #ffffff;

  .product-desc {
    position: relative;
    width: calc(100% - 200rpx);
    margin: 10rpx;
    .product-number {
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .product-text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      text:nth-child(1) {
        display: block;
        flex: 2;
        margin-top: 5rpx;
        font-size: 28rpx;
        font-weight: bold;
      }
      text:nth-child(2) {
        display: block;
        margin-top: 5rpx;
        font-size: 24rpx;
        color: red;
      }
      text:nth-child(3) {
        display: block;
        margin-top: 5rpx;
        font-size: 20rpx;
        color: #999;
      }
    }
  }
}
.add-cart {
  height: 100rpx;
  padding-right: 25rpx;
  padding-left: 25rpx;
  border-top: 1rpx solid $htm-divider-color;
}
</style>
<style lang="scss">
.htm-popup {
  height: 400rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
}
</style>
